<template>
  <div class="my_height">
    <van-pull-refresh v-model="isDownLoading" @refresh="onDownRefresh">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <img class="my_sw_item" src="@/assets/imgs/jiayoubanner.jpg" alt />
        </van-swipe-item>
        <van-swipe-item>
          <img class="my_sw_item" src="@/assets/imgs/banner2.jpg" alt />
        </van-swipe-item>
        <van-swipe-item>
          <img class="my_sw_item" src="@/assets/imgs/jiayoubanner33.jpg" alt />
        </van-swipe-item>
        <van-swipe-item>
          <img class="my_sw_item" src="@/assets/imgs/jiayoubanner44.jpg" alt />
        </van-swipe-item>
      </van-swipe>
      <div>
        <van-notice-bar left-icon="volume-o" :scrollable="false">
          <van-swipe vertical class="notice-swipe" :autoplay="2000" :show-indicators="false">
            <van-swipe-item>***车主在中国石化加油999快...</van-swipe-item>
            <van-swipe-item>***车主在中国石化加油999快...</van-swipe-item>
            <van-swipe-item>***车主在中国石化加油999快...</van-swipe-item>
          </van-swipe>
        </van-notice-bar>
      </div>
      <div class="search_box">
        <van-dropdown-menu>
          <van-dropdown-item :title="searchFrom.distances+'km内'" ref="item">
            <div class="search_list" style="margin-top:20px;">
              <div class="serach_item" v-for="item in distanceList" :key="item.id">
                <div
                  @click="handDis(item.id,item)"
                  :class="['item_i', disID == item.id ? 'dis_is' : '']"
                >{{ item.name+'km内' }}</div>
              </div>
            </div>
          </van-dropdown-item>
          <van-dropdown-item
            :title="searchFrom.oilName == '' ? '请选择油号' : searchFrom.oilName"
            ref="item2"
          >
            <div style="margin-top:20px;">
              <div v-for="item in gasolineList" :key="item.id">
                <div class="gas_title">{{ item.name }}</div>
                <div class="search_list">
                  <div class="serach_item" v-for="item2 in item.list" :key="item2.id">
                    <div
                      @click="handGas(item2)"
                      :class="['item_i', disID2 == item2.id ? 'dis_is' : '']"
                    >{{ item2.name }}</div>
                  </div>
                </div>
              </div>
            </div>
          </van-dropdown-item>
          <van-dropdown-item :title="pinPaiName == '' ? '全部品牌' : pinPaiName" ref="item3">
            <div class="search_list" style="margin-top:20px;">
              <div class="serach_item" v-for="item in oilType" :key="item.id">
                <div
                  @click="handBra(item)"
                  :class="['item_i', item.id == pinpaiId ? 'dis_is' : '']"
                >{{ item.name }}</div>
              </div>
            </div>
            <van-divider />
          </van-dropdown-item>
        </van-dropdown-menu>
      </div>
      <van-empty description="暂无数据" v-if="oilList.length == 0" />
      <div class="site_list">
        <van-list
          v-model="isUpLoading"
          :finished="upFinished"
          :immediate-check="false"
          :offset="10"
          finished-text="我是有底线的"
          @load="onLoadList"
        >
          <div v-if="oilList.length != 0">
            <div
              class="site_item"
              v-for="item in oilList"
              :key="item.gasId"
              @click="handDetails(item)"
            >
              <div class="item_left">
                <div class="item_title">{{ item.gasName }}</div>
                <div class="item_location">
                  <img class="location_icon" src="@/assets/imgs/dingwei.png" alt />
                  <div class="location_title">{{ item.gasAddress }}</div>
                </div>
                <div class="pic_box">
                  <div class="pic_rmb">￥</div>
                  <div class="pic_num">{{ item.priceGun }}</div>
                  <!-- <tag></tag> -->
                  <!-- <van-tag mark type="danger" v-if="item.gasType>4">其他</van-tag> -->
                  <van-tag mark type="danger">{{ oilType[item.gasType - 1].name }}</van-tag>
                  <van-tag style="margin-left:8px;" mark type="danger">{{ item.oilName }}</van-tag>

                  <div class="guobiao">国标价{{ item.priceOfficial }}</div>
                </div>
              </div>
              <div @click.stop="handMap(item)" class="item_right">
                <img class="item_right_icon" src="@/assets/imgs/feiji.png" alt />
                <div class="item_right_title">{{item.spacing}}km</div>
              </div>
            </div>
          </div>
        </van-list>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
import tag from '@/components/tag/index.vue'
import {home, JsapiTicket} from '@/api/user.js'
import axios from 'axios'
import wx from 'weixin-js-sdk'
export default {
  name: 'TabBar',
  components: {
    tag
  },
  data() {
    return {
      myMsg:
        '.***车主在中国石化加油999快....***车主在中国石化加油999快....***车主在中国石化加油999快....***车主在中国石化加油999快....***车主在中国石化加油999快....***车主在中国石化加油999快....',
      pinpaiId: '',
      pinPaiName: '',
      result: [],
      nullTip: '空空如也~',
      pageSize: 10, // 每页条数
      pageIndex: 1, // 页码
      dtWinNumberInfos: [], // 请求数据
      isDownLoading: false, // 下拉刷新
      isUpLoading: false, // 上拉加载
      upFinished: false, // 上拉加载完毕
      offset: 100,
      disID: '0',
      disID2: '0.2',
      disID3: '5645236',
      disID4: '0',
      value: 0,
      switch1: false,
      switch2: false,
      checked: false,
      oilList: [],
      oilType: [
        {
          name: '中国石油',
          id: 1,
          isSel: false
        },
        {
          name: '中国石化',
          id: 2,
          isSel: false
        },
        {
          name: '壳牌',
          id: 3,
          isSel: false
        },
        {
          name: ' 其他',
          id: 4,
          isSel: false
        },
        {
          name: '中海油',
          id: 5,
          isSel: false
        },
        {
          name: '中化石油',
          id: 6,
          isSel: false
        },
        {
          name: '中国国际能源',
          id: 7,
          isSel: false
        },
        {
          name: '强林',
          id: 8,
          isSel: false
        },
        {
          name: '中图',
          id: 9,
          isSel: false
        },
        {
          name: '和顺',
          id: 10,
          isSel: false
        },
        {
          name: '众诚',
          id: 11,
          isSel: false
        },
        {
          name: '道达尔',
          id: 12,
          isSel: false
        },
        {
          name: '中石化',
          id: 13,
          isSel: false
        },
        {
          name: '大桥',
          id: 14,
          isSel: false
        },
        {
          name: '马家联合',
          id: 15,
          isSel: false
        },
        {
          name: '新华联合',
          id: 16,
          isSel: false
        }
      ],
      option: [
        {text: '全部商品', value: 0},
        {text: '新款商品', value: 1},
        {text: '活动商品', value: 2}
      ],
      capacity: [
        {
          name: '只能排序',
          id: '5645236'
        },
        {
          name: '距离优先',
          id: '56131456'
        },
        {
          name: '价格优先',
          id: '564526'
        }
      ],
      distanceList: [
        {
          name: '6',
          id: '0'
        },
        {
          name: '10',
          id: '1'
        },
        {
          name: '15',
          id: '2'
        },
        {
          name: '20',
          id: '3'
        },
        {
          name: '50',
          id: '4'
        }
      ],
      brandList: [
        {
          name: '中国石化',
          id: '0'
        },
        {
          name: '中国石油',
          id: '1'
        },
        {
          name: '壳牌',
          id: '2'
        },
        {
          name: '中国海油',
          id: '3'
        },
        {
          name: '中化石油',
          id: '4'
        },
        {
          name: '中国航油',
          id: '5'
        },
        {
          name: '道达尔',
          id: '6'
        },
        {
          name: '加德士',
          id: '7'
        },

        {
          name: '金盾石化',
          id: '8'
        },
        {
          name: '众诚连锁',
          id: '9'
        },
        {
          name: '和顺石油',
          id: '10'
        },
        {
          name: '大桥石化',
          id: '11'
        },
        {
          name: '美福石油',
          id: '12'
        },
        {
          name: '强林石化',
          id: '13'
        },
        {
          name: '中图能源',
          id: '14'
        },

        {
          name: '京博石化',
          id: '15'
        },
        {
          name: '悦孚石化',
          id: '16'
        },
        {
          name: '东明石化',
          id: '17'
        },
        {
          name: '亚孚石化',
          id: '18'
        },
        {
          name: '其他',
          id: '19'
        }
      ],
      gasolineList: [
        {
          name: '汽油',
          id: '0',
          list: [
            {
              id: '0.231',
              name: '90#'
            },
            {
              id: '0.2',
              name: '92#'
            },
            {
              id: '0.3',
              name: '95#'
            },
            {
              id: '12312.4',
              name: '98#'
            }
          ]
        },
        {
          name: '柴油',
          id: '1',
          list: [
            {
              id: '0.432',
              name: '-40#'
            },
            {
              id: '0.13123',
              name: '-35#'
            },
            {
              id: '0.4',
              name: '-30#'
            },
            {
              id: '0.5',
              name: '-200#'
            },
            {
              id: '0.6',
              name: '-10#'
            },
            {
              id: '0.11',
              name: '国四0#'
            },
            {
              id: '0.22',
              name: '0#'
            },
            {
              id: '0.33',
              name: '-1001#'
            },
            {
              id: '0.55',
              name: '-2001#'
            },
            {
              id: '0.66',
              name: '-3501#'
            }
          ]
        },
        {
          name: '天然气',
          id: '2',
          list: [
            {
              id: '0.88',
              name: 'CNG'
            },
            {
              id: '0.99',
              name: 'LNG'
            }
          ]
        }
      ],

      searchFrom: {
        oilName: '',
        pinName: '',
        latitude: '',
        longitude: '',
        distances: 50
      }
    }
  },
  mounted() {
    this.myMsg =
      '***车主在中国石化加油999快....***车主在中国石化加油999快....***车主在中国石化加油999快....***车主在中国石化加油999快....***车主在中国石化加油999快....***车主在中国石化加油999快....***车主在中国石化加油999快....'
    if (window.performance.navigation.type == 1) {
      console.log('页面被刷新')
      this.getShopWxConfig()
      // if (!JSON.parse(sessionStorage.getItem('latLon'))) {
      //   this.getShopWxConfig()
      // } else {
      //   this.searchFrom.latitude = JSON.parse(sessionStorage.getItem('latLon')).latitude
      //   this.searchFrom.longitude = JSON.parse(sessionStorage.getItem('latLon')).longitude
      //   this.getroadList()
      // }
    } else {
      console.log('首次被加载')
      this.getShopWxConfig()
    }
  },
  methods: {
    async handMap(item) {
      let that = this
      wx.ready(function() {
        wx.openLocation({
          latitude: Number(item.gasAddressLatitude), // 纬度，浮点数，范围为90 ~ -90
          longitude: Number(item.gasAddressLongitude), // 经度，浮点数，范围为180 ~ -180。
          name: item.gasName, // 位置名
          address: item.gasAddress, // 地址详情说明
          scale: 16, // 地图缩放级别,整形值,范围从1~28。默认为最大
          infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
        })
      })
      // let params = window.location.href.split('#')[0]
      // await JsapiTicket(params)
      //   .then(res => {
      //     wx.config({
      //       debug: false,
      //       appId: res.data.wxJsapiSignature.appId,
      //       nonceStr: res.data.wxJsapiSignature.nonceStr,
      //       timestamp: res.data.wxJsapiSignature.timestamp,
      //       // url: res.data.url,
      //       signature: res.data.wxJsapiSignature.signature,
      //       jsApiList: ['checkJsApi', 'openLocation', 'getLocation']
      //     })
      //     wx.checkJsApi({
      //       jsApiList: ['getLocation'],
      //       success: function(res) {
      //         if (res.checkResult.getLocation == false) {
      //           alert('你的微信版本太低，不支持微信JS接口，请升级到最新的微信版本！')
      //           return
      //         }
      //       }
      //     })

      //     // Toast('提示内容!!!!!!!!!!!!!!!!!!!!!!!!!!!!!')
      //     // if (!JSON.parse(sessionStorage.getItem('latLon'))) {
      //     //   that.$toast('获取位置,查询附近所有油站')
      //     // } else {
      //     // }

      //     that.$toast('获取位置中,查询附近所有油站')
      //     wx.error(function(res) {
      //       console.log(res, '错误信息')
      //     })
      //   })
      //   .catch(res => {
      //     console.log(res)
      //   })
    },
    async getShopWxConfig() {
      let that = this
      let params = window.location.href.split('#')[0]
      console.log(params, 'url')
      await JsapiTicket(params)
        .then(res => {
          wx.config({
            debug: false,
            appId: res.data.wxJsapiSignature.appId,
            nonceStr: res.data.wxJsapiSignature.nonceStr,
            timestamp: res.data.wxJsapiSignature.timestamp,
            // url: res.data.url,
            signature: res.data.wxJsapiSignature.signature,
            jsApiList: ['checkJsApi', 'openLocation', 'getLocation']
          })
          wx.checkJsApi({
            jsApiList: ['getLocation'],
            success: function(res) {
              if (res.checkResult.getLocation == false) {
                alert('你的微信版本太低，不支持微信JS接口，请升级到最新的微信版本！')
                return
              }
            }
          })
          that.$toast('获取位置中,查询附近所有油站')
          // Toast('提示内容!!!!!!!!!!!!!!!!!!!!!!!!!!!!!')
          // if (!JSON.parse(sessionStorage.getItem('latLon'))) {
          //   that.$toast('获取位置,查询附近所有油站')
          // } else {
          // }
          wx.ready(function() {
            wx.getLocation({
              success: function(res) {
                sessionStorage.setItem('latLon', JSON.stringify(res))
                console.log(res, '获取权限', JSON.parse(sessionStorage.getItem('latLon')))
                that.searchFrom.latitude = res.latitude // 纬度，浮点数，范围为90 ~ -90
                that.searchFrom.longitude = res.longitude // 经度，浮点数，范围为180 ~ -180。
                console.log('进来了吗', res)
                that.getroadList()
              },
              cancel: function(res) {
                alert('用户拒绝授权获取地理位置')
              }
            })
          })

          wx.error(function(res) {
            //                        console.log(res)
          })
        })
        .catch(res => {
          console.log(res)
        })
    },

    handSearchSub() {},
    handGas(row) {
      this.searchFrom.oilName = ''
      this.searchFrom.oilName = row.name

      this.pageIndex = 1
      this.upFinished = false
      this.getroadList()
      this.disID2 = row.id
      this.$refs.item2.toggle()
    },
    getroadList() {
      console.log(this.searchFrom, '有经纬度吗?')
      var compare = function(property) {
        return function(a, b) {
          var value1 = a[property]
          var value2 = b[property]
          return value1 - value2
        }
      }
      const _this = this
      home({
        oilName: this.searchFrom.oilName,
        gasType: this.searchFrom.pinName,
        longitude: this.searchFrom.longitude,
        latitude: this.searchFrom.latitude,
        distances: this.searchFrom.distances
      })
        .then(response => {
          // const rows = response.data.data.rows
          const rows = response.data
          _this.oilList = rows
          console.log(response, '首页查询')
          _this.oilList.forEach(item => {
            item.priceGun = item.oilpriceList[0].priceGun
            item.priceOfficial = item.oilpriceList[0].priceOfficial
            item.oilName = item.oilpriceList[0].oilName
          })
          _this.oilList.sort(compare('spacing'))
        })
        .catch(error => {})
        .finally(() => {
          _this.isDownLoading = false
          _this.isUpLoading = false
        })
    },
    // getroadList() {
    //   const _this = this
    //   home({
    //     limit: this.pageIndex,
    //     page: this.pageIndex * this.pageSize,
    //     oilName: this.searchFrom.oilName,
    //     gasType: this.searchFrom.pinName
    //   })
    //     .then(response => {
    //       // const rows = response.data.data.rows
    //       const rows = response.data.data
    //       if (this.pageIndex == 1 && rows.length == 0) {
    //         _this.oilList = rows
    //       }

    //       if (rows == null || rows.length === 0) {
    //         // 加载结束
    //         console.log(_this.oilList, this.pageIndex)
    //         _this.upFinished = true
    //         return
    //       }

    //       if (rows.length < this.pageSize) {
    //         // 最后一页不足10条的情况
    //         _this.upFinished = true
    //       }
    //       // 处理数据
    //       if (_this.pageIndex === 1) {
    //         _this.oilList = rows
    //       } else {
    //         _this.oilList = _this.oilList.concat(rows)
    //       }

    //       _this.oilList.forEach(item => {
    //         item.priceGun = item.oilpriceList[0].priceGun
    //         item.priceOfficial = item.oilpriceList[0].priceOfficial
    //         item.oilName = item.oilpriceList[0].oilName
    //       })
    //     })
    //     .catch(error => {})
    //     .finally(() => {
    //       _this.isDownLoading = false
    //       _this.isUpLoading = false
    //     })
    // },
    onDownRefresh() {
      this.upFinished = false // 不写这句会导致你上拉到底过后在下拉刷新将不能触发下拉加载事件
      this.searchFrom.oilName = ''
      this.searchFrom.pinName = ''
      this.pinPaiName = ''
      this.searchFrom.distances = '50'
      this.getroadList() // 加载数据
    },
    // 上拉加载请求方法
    onLoadList() {
      this.isUpLoading = false
      // this.getroadList()
    },
    // 跳转详情页
    onLoad() {
      home({limit: 1, page: 10}).then(res => {
        console.log(res, 'www')
        this.oilList = res.data.data
        // this.loading = false
      })
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      this.onLoad()
    },
    handDetails(item) {
      this.$router.push({
        name: 'details',
        query: {
          id: item.gasId,
          site: item.gasAddress,
          gasLogoBig: item.gasLogoBig,
          spacing: item.spacing,
          longitude: item.gasAddressLongitude,
          latitude: item.gasAddressLatitude
        }
      })
    },

    handBra(item) {
      this.pinpaiId = item.id
      this.searchFrom.pinName = ''
      this.searchFrom.pinName = item.id
      this.pinPaiName = item.name
      this.pageIndex = 1
      this.upFinished = false
      this.getroadList()
      this.$refs.item3.toggle()
    },
    handCap(id) {
      this.disID3 = id
    },
    handDis(id, item) {
      this.searchFrom.distances = item.name
      this.disID = id
      this.getroadList()
      this.$refs.item.toggle()
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.notice-swipe {
  height: 40px;
  line-height: 40px;
}
.my_height {
  // height: 100vh;
}
.my_height /deep/ .van-pull-refresh__track {
  // height: 100vh;
}
.van-checkbox--horizontal {
  margin-bottom: 16px;
}
.location_title {
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.site_list {
  margin-top: 20px;
  padding: 0 20px;
  height: 100%;
  .item_right {
    text-align: center;
    .item_right_icon {
      margin-bottom: 8px;
      width: 18px;
      height: 18px;
    }
    .item_right_title {
      font-size: 12px;
      color: #909399;
    }
  }
  .site_item {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 20px;
    .item_left {
      .item_title {
        font-size: 15px;
        font-weight: bold;
        margin-bottom: 6px;
      }
      .item_location {
        display: flex;
        align-items: center;

        .location_icon {
          width: 12px;
          height: 12px;
        }
        color: #909399;
        margin-bottom: 6px;
      }
      .pic_box {
        display: flex;
        align-items: center;
        // margin-bottom: 8px;
        .guobiao {
          color: #909399;
          font-size: 8px;
          margin-left: 8px;
          text-decoration: line-through;
        }
        .pic_rmb {
          font-size: 10px;
          color: red;
        }
        .pic_num {
          font-size: 22px;
          // font-weight: bold;
          color: red;
          margin-right: 5px;
        }
      }
      .dow_authentication {
        background-color: #ffcc99;
        color: #ff9900;
        padding: 3px;
        font-size: 10px;
        border-radius: 3px;
      }
    }
  }
}
.my-swipe {
  margin: 20px 0;
  margin-bottom: 0;
}
.search_list .item_i.dis_is {
  border-color: red !important;
  color: red !important;
}
.sele_box {
  padding: 26px;
  padding-top: 0;
  display: flex;
  justify-content: space-between;
  .sele_right {
    display: flex;
    align-content: center;
    .right_clos {
      margin-right: 10px;
    }
  }
}
/deep/ .van-ellipsis {
  font-size: 12px;
}
.gas_title {
  margin-left: 20px;
  margin-bottom: 5px;
}
.search_list {
  display: flex;
  align-content: center;
  padding: 20px;
  padding-top: 0;
  padding-bottom: 0;
  flex-wrap: wrap;
  .serach_item {
    width: 25%;
    margin-bottom: 15px;
    .item_i {
      padding-left: 3px;
      padding-right: 3px;
      width: 60px;
      height: 25px;
      border: 1px solid #909399;
      line-height: 25px;
      text-align: center;
      color: #909399;
      margin: 0 auto;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      word-break: break-all;
    }
  }
}
.van-collapse-item.van-hairline--top {
  position: static;
}
.search_flex {
  display: flex;
  position: relative;

  .van-cell__title {
  }
}
/deep/ .van-collapse-item__wrapper {
  position: absolute;
  width: 100%;
  z-index: 999;
  left: 0;
}
.my_sw_item {
  height: 160px;
  width: 100%;
  border-radius: 10px;
}
.app-container {
  .warpper {
    padding: 12px;
    background: #fff;
    .demo-home__title {
      margin: 0 0 6px;
      font-size: 32px;
      .demo-home__title img,
      .demo-home__title span {
        display: inline-block;
        vertical-align: middle;
      }
      img {
        width: 32px;
      }
      span {
        margin-left: 16px;
        font-weight: 500;
      }
    }
    .demo-home__desc {
      margin: 0 0 20px;
      color: rgba(69, 90, 100, 0.6);
      font-size: 14px;
    }
  }
}
</style>
